<template>
  <j-modal
    :title="title"
    width="100%"
    :visible="visible"
    switchFullscreen
    @cancel="close"
    cancelText="关闭">
    <template slot="footer">
      <a-button @click="close">取消</a-button>
      <a-button type="primary" @click="handleOk">确认</a-button>
    </template>
    <a-spin :spinning='confirmLoading'>
      <!--           自定义上传选择-->
      <div v-if='visible' style='overflow: hidden;height: 42px'>
        <j-upload ref='upload' v-if="title=='新增'" @change='(url,filelist)=>uploadChange(url,filelist)' :disabled='false'
                  style='margin-bottom:10px'></j-upload>
      </div>
      <!--        v-if="title=='下载'"-->
      <a-table
        ref='table'
        size='middle'
        bordered
        rowKey='urlPath'
        :scroll="{x:'max-content',y:pageHeight-seachHeight-220}"
        :columns='columns'
        :dataSource='filelist'
        :pagination='false'
        :loading='loading'>
        <template slot='fileName' slot-scope='t,r,index'>
          <a v-downLoad='(r)'>{{ r.fileName }}</a>
        </template>
        <span slot='action' slot-scope='text, record,index'>
          <a v-if="title=='新增'" @click="deletBut ? '' : handleDelete(record,index)">删除</a>
          <a v-if="title=='下载'" @click='downloadFile(record.urlPath,record.fileName)'>下载</a>
        </span>
      </a-table>
    </a-spin>

    <div
      :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
    >
      <a-button :style="{ marginRight: '8px' }" @click='handleCancel'>
        取消
      </a-button>
      <a-button type='primary' @click='handleOk'>
        确认
      </a-button>
    </div>
  </j-modal>
</template>
<script>
import { PageListMixin } from '@/mixins/PageListMixin'
import proChose from '@comp/cn-components/ProChose'
import { getAction, httpAction, postAction } from '@/api/manage'
import { pick } from 'lodash'
import JUpload from '@/components/cn-form/JUpload'
import downloadFile from '@/api/manage'
import { filesDownLoad, downLoad } from '@/directive/downLoadUrl'


export default {
  name: 'formItemsDraw',
  directives: { filesDownLoad,downLoad },
  mixins: [PageListMixin],
  props: {
    deletBut: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      title: '新增',
      value: [],
      display: false,
      columns: [
        {
          title: '附件名称',
          align: 'left',
          dataIndex: 'fileName',
          scopedSlots: { customRender: 'fileName' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'left',
          width: 60,
          fixed: 'right',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'action'
          }
        }
      ],
      visible: false,
      model: {},
      filelist: [],
      confirmLoading: false,
      url: {
        // 列表接口
        // list: window._CONFIG['domianTpmURL']+ "/feepay/tpmFeePayHead/findPageList",
        // 详情接口
        // detail: window._CONFIG['domianTpmURL']+ "/feepay/tpmFeePayHead/getInfo",
      },
      letter: ''
    }
  },
  components: { JUpload },
  created() {


  },
  methods: {
    add() {
      this.edit({})
    },
    edit(record) {
      this.filelist = record || []
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.filelist = []
    },
    handleOk() {
      const that = this
      that.confirmLoading = true
      that.confirmLoading = false
      that.$emit('okpopup', this.filelist, this.letter)
      that.close()
    },
    handleCancel() {
      this.close()
    },

    handleDelete(e, index) {
      this.filelist.splice(index, 1)
    },

    uploadChange(url, filelist) {
      filelist.map(v => {
        let index = this.filelist.findIndex(item => item.fileName == v.name)
        if (index == -1) {
          this.filelist.push({
            fileName: v.name,
            urlPath: v.url
          })
        } else {
          this.$message.warning(`文件 ${v.name} 已存在，请勿重复上传`)
        }
      })
      this.$refs.upload.fileList = []
    }
  }
}
</script>

<style scoped>
.gonghuoxinxi {
  width: 100%;
  border-bottom: 1px dashed black;
  margin: 10px 0;
  padding: 15px 5px;
  display: flex;
  flex-direction: column;
}

/deep/ .ant-upload-list {
  visibility: hidden
}
</style>